<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>移动端文件选择测试</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
            background: #f5f5f5;
        }
        .container {
            max-width: 600px;
            margin: 0 auto;
            background: white;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        .test-section {
            margin-bottom: 30px;
            padding: 20px;
            border: 2px solid #ddd;
            border-radius: 8px;
        }
        .test-section h3 {
            color: #333;
            margin-top: 0;
        }
        input[type="file"] {
            width: 100%;
            padding: 10px;
            margin: 10px 0;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        .result {
            background: #f8f9fa;
            padding: 10px;
            border-radius: 5px;
            margin-top: 10px;
            min-height: 40px;
        }
        .browser-info {
            background: #e3f2fd;
            padding: 15px;
            border-radius: 8px;
            margin-bottom: 20px;
        }
        .btn {
            background: #2196f3;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            margin: 5px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>📱 移动端文件选择兼容性测试</h1>
        
        <div class="browser-info">
            <h3>当前浏览器信息</h3>
            <div id="browserInfo"></div>
        </div>

        <div class="test-section">
            <h3>测试1：多文件选择（multiple属性）</h3>
            <input type="file" id="multipleTest" multiple accept="image/*,video/*">
            <button class="btn" onclick="testMultiple()">测试选择</button>
            <div class="result" id="multipleResult">请选择文件后点击测试按钮</div>
        </div>

        <div class="test-section">
            <h3>测试2：单文件选择</h3>
            <input type="file" id="singleTest" accept="image/*,video/*">
            <button class="btn" onclick="testSingle()">测试选择</button>
            <div class="result" id="singleResult">请选择文件后点击测试按钮</div>
        </div>

        <div class="test-section">
            <h3>测试3：拖拽支持</h3>
            <div id="dropZone" style="border: 2px dashed #ccc; padding: 40px; text-align: center; border-radius: 8px;">
                拖拽文件到这里测试
            </div>
            <div class="result" id="dropResult">拖拽功能测试结果</div>
        </div>

        <div class="test-section">
            <h3>兼容性建议</h3>
            <div id="recommendations"></div>
        </div>
    </div>

    <script>
        // 显示浏览器信息
        function showBrowserInfo() {
            const userAgent = navigator.userAgent;
            let browserName = '未知浏览器';
            let compatibility = '未知';
            
            if (userAgent.includes('Chrome') && !userAgent.includes('Edge')) {
                browserName = 'Chrome';
                compatibility = '✅ 完全支持';
            } else if (userAgent.includes('Firefox')) {
                browserName = 'Firefox';
                compatibility = '✅ 完全支持';
            } else if (userAgent.includes('Safari') && !userAgent.includes('Chrome')) {
                browserName = 'Safari';
                compatibility = '⚠️ 部分支持';
            } else if (userAgent.includes('Edge')) {
                browserName = 'Edge';
                compatibility = '✅ 完全支持';
            } else if (userAgent.includes('OPPO')) {
                browserName = 'OPPO浏览器';
                compatibility = '❌ 多文件选择受限';
            } else if (userAgent.includes('Vivo')) {
                browserName = 'Vivo浏览器';
                compatibility = '❌ 多文件选择受限';
            } else if (userAgent.includes('Huawei')) {
                browserName = '华为浏览器';
                compatibility = '⚠️ 部分支持';
            } else if (userAgent.includes('Xiaomi')) {
                browserName = '小米浏览器';
                compatibility = '⚠️ 版本差异';
            }
            
            document.getElementById('browserInfo').innerHTML = `
                <strong>浏览器：</strong> ${browserName}<br>
                <strong>兼容性：</strong> ${compatibility}<br>
                <strong>User Agent：</strong> <small>${userAgent}</small>
            `;
        }

        // 测试多文件选择
        function testMultiple() {
            const input = document.getElementById('multipleTest');
            const result = document.getElementById('multipleResult');
            
            if (input.files.length === 0) {
                result.innerHTML = '❌ 未选择任何文件';
                result.style.background = '#ffebee';
                return;
            }
            
            let html = `<strong>选择了 ${input.files.length} 个文件：</strong><br>`;
            for (let i = 0; i < input.files.length; i++) {
                const file = input.files[i];
                html += `${i + 1}. ${file.name} (${(file.size / 1024 / 1024).toFixed(2)} MB)<br>`;
            }
            
            if (input.files.length === 1) {
                html += '<br>⚠️ 只选择了一个文件，可能是浏览器限制';
                result.style.background = '#fff3e0';
            } else {
                html += '<br>✅ 多文件选择正常工作';
                result.style.background = '#e8f5e8';
            }
            
            result.innerHTML = html;
        }

        // 测试单文件选择
        function testSingle() {
            const input = document.getElementById('singleTest');
            const result = document.getElementById('singleResult');
            
            if (input.files.length === 0) {
                result.innerHTML = '❌ 未选择任何文件';
                result.style.background = '#ffebee';
                return;
            }
            
            const file = input.files[0];
            result.innerHTML = `
                <strong>✅ 单文件选择正常：</strong><br>
                文件名：${file.name}<br>
                大小：${(file.size / 1024 / 1024).toFixed(2)} MB<br>
                类型：${file.type}
            `;
            result.style.background = '#e8f5e8';
        }

        // 测试拖拽功能
        function setupDragDrop() {
            const dropZone = document.getElementById('dropZone');
            const dropResult = document.getElementById('dropResult');
            
            dropZone.addEventListener('dragover', (e) => {
                e.preventDefault();
                dropZone.style.background = '#e3f2fd';
                dropZone.style.borderColor = '#2196f3';
            });
            
            dropZone.addEventListener('dragleave', (e) => {
                e.preventDefault();
                dropZone.style.background = '';
                dropZone.style.borderColor = '#ccc';
            });
            
            dropZone.addEventListener('drop', (e) => {
                e.preventDefault();
                dropZone.style.background = '';
                dropZone.style.borderColor = '#ccc';
                
                const files = e.dataTransfer.files;
                if (files.length === 0) {
                    dropResult.innerHTML = '❌ 拖拽功能不支持或未检测到文件';
                    dropResult.style.background = '#ffebee';
                    return;
                }
                
                let html = `<strong>✅ 拖拽功能正常，检测到 ${files.length} 个文件：</strong><br>`;
                for (let i = 0; i < files.length; i++) {
                    const file = files[i];
                    html += `${i + 1}. ${file.name} (${(file.size / 1024 / 1024).toFixed(2)} MB)<br>`;
                }
                
                dropResult.innerHTML = html;
                dropResult.style.background = '#e8f5e8';
            });
        }

        // 显示建议
        function showRecommendations() {
            const userAgent = navigator.userAgent;
            let recommendations = '';
            
            if (userAgent.includes('OPPO') || userAgent.includes('Vivo')) {
                recommendations = `
                    <h4>🔧 针对您的浏览器的建议：</h4>
                    <ol>
                        <li><strong>推荐方案：</strong>下载Chrome浏览器获得最佳体验</li>
                        <li><strong>当前浏览器：</strong>使用"分批选择"或"单文件模式"</li>
                        <li><strong>操作技巧：</strong>在文件选择器中长按文件尝试多选</li>
                    </ol>
                `;
            } else if (userAgent.includes('Chrome') || userAgent.includes('Firefox') || userAgent.includes('Edge')) {
                recommendations = `
                    <h4>✅ 您的浏览器兼容性良好：</h4>
                    <p>当前浏览器完全支持多文件选择和拖拽功能，可以正常使用所有功能。</p>
                `;
            } else {
                recommendations = `
                    <h4>⚠️ 通用建议：</h4>
                    <ol>
                        <li>如遇到多文件选择问题，建议使用Chrome浏览器</li>
                        <li>可以尝试使用分批选择功能</li>
                        <li>单文件模式通常在所有浏览器中都能正常工作</li>
                    </ol>
                `;
            }
            
            document.getElementById('recommendations').innerHTML = recommendations;
        }

        // 页面加载时执行
        window.onload = function() {
            showBrowserInfo();
            setupDragDrop();
            showRecommendations();
        };
    </script>
</body>
</html> 